<template>
	<baseDrawer ref="drawerRef" :title="drawerTitle" :showFooter="false" @close="handleClose">
		<el-table :data="tableData">
			<el-table-column prop="token" label="token" width="200" show-overflow-tooltip />
			<el-table-column prop="channel_name" label="渠道名称" width="100" />
			<el-table-column prop="create_time" label="创建时间" width="100" />
			<el-table-column prop="expire_time" label="过期时间" width="100" />
			<el-table-column label="操作" fixed="right">
				<template #default="{ row }">
					<el-button size="small" text type="danger" @click="handleDeleteToken(row.token)">下线</el-button>
				</template>
			</el-table-column>
		</el-table>
	</baseDrawer>
</template>

<script setup lang="ts" name="userTokenInfo">
import { ref, computed, onMounted } from 'vue';
import { userToken, userDeleteToken } from '/@/api/user/user';
import { messageBox, messageSuccess } from '/@/utils/message';

const drawerRef = ref(null);

const drawerTitle = computed(() => {
	return '线上管理';
});

const emit = defineEmits(['close']);

const tableData = ref(null);

const userId = ref(0);

const setFormData = async (row: any, callback: any) => {
	const data = await userToken({
		id: row.id,
	});
	userId.value = row.id;
	tableData.value = data;
	callback();
};

const handleDeleteToken = async (token) => {
	messageBox('确认要下线吗？').then(async () => {
		await userDeleteToken({ id: userId.value, token: token });
		messageSuccess('下线成功');
		setFormData({ id: userId.value }, () => {});
	});
};

const handleClose = () => {
	emit('close');
};

const open = () => {
	drawerRef.value?.open();
};

onMounted(() => {});

defineExpose({
	open,
	setFormData,
});
</script>
